<template>
	<!-- 填充 -->
	<view :class="taskSwitch ? 'taskBody1' : 'taskBody2'">
		<view class="taskItem" v-for="(item,index) in taskList" :key="index"
		@click="$util.redirectTo('/pages/taskdetails/taskdetails',{id:item.id})">
			<text class="taskItem-top">
				<view class="imgbox">
					<image :src="$util.img(item.file)" mode=""></image>
				</view>
			</text>
			<view class="taskright">
				<text class="right-name">{{item.name}}</text>
				<text class="b-hover" v-if="item.zdstatus">置顶</text>
				<text class="right-money" v-if="!zpid">￥{{item.price}}元</text>
			</view>
			<view class="new-taskItem-bottom">
				<text>{{item.labelone}}</text>
				<!-- <text>{{item.labeltwo}}</text> -->
				<!-- <text class="b-hover" v-if="!item.zdstatus">置顶</text> -->
			</view>
			<view class="taskItem-bottom">
				<view class="taskBitem">
					<text class="iconfont icon-jilu"></text>
					<text>{{item.wccount}}人已赚</text>
				</view>
				<view class="taskBitem">
					<text class="iconfont icon-qian"></text>
					<text>剩余{{item.surplus}}</text>
				</view>
				<view class="taskBitem">
					<text class="iconfont icon-wode"></text>
					<text>{{item.visitors}}人</text>
				</view>
			</view>
		</view>			
	</view>
</template>

<script>
	export default{
		props:{
			// 展示方式切换
			taskSwitch:{
				type:Boolean,
				default:false
			},
			//数据
			taskList:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return {
				zpid:{}
			}
		},
		mounted(){
			this.zpid = uni.getStorageSync('zpid');
		},
		methods:{
		}
	}
</script>

<style lang="scss" scoped>
	.fill{
		margin-top: 120rpx;
	}
	// 第一种样式
	.taskBody1{
		margin: 0 30rpx;
		display: flex;
		flex-wrap: wrap;
		.taskItem{
			width: 332rpx;
			height: 274rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			margin:0 26rpx 26rpx 0;
			padding: 26rpx 24rpx 0 20rpx;
			box-sizing: border-box;
			box-shadow: 0px 2px 6px 0px rgba(225, 225, 225, 40);
			.taskItem-top{
				display: flex;
				.imgbox{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 80rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.taskright{
					width: 196rpx;
					font-family: PingFangSC-regular;
					color: #101010;
					display: flex;
					flex-direction: column;
					margin:22rpx 0 0 12rpx;
					font-weight: bold;
					.right-name{
						font-size: 26rpx;
						width: 100%;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						margin-bottom: 12rpx;
					}
					.right-money{
						font-size: 28rpx;
						color: $uni-tabbar-hovercolor;
					}
					
				}
			}
			
			.taskItem-bottom{
				display: flex;
				flex-direction: column;
				margin: 24rpx 0 16rpx 0;
				.taskBitem{
					color: #999999;
					// font-weight: bold;
					font-size:24rpx;
					margin-bottom: 16rpx;
					.iconfont{
						margin-right: 16rpx;
					}
				}
			}
		}
		.taskItem:nth-child(2n){
			margin-right: 0;
		}
	}
	// 第二种样式
	.taskBody2{
		margin: 0 30rpx;
		padding-bottom: 1rpx;
		.taskItem{
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 10px;
			box-shadow: 0px 2px 6px 0px rgba(225, 225, 225, 40);
			margin-bottom: 20rpx;
			
			.taskItem-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.imgbox{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 80rpx;
					margin-right: 20rpx;
					overflow: hidden;
					position: absolute;
					margin-top: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.taskright{
				width: calc(100% - 80rpx);
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFangSC-regular;
				font-weight: bold;
				margin-bottom: 10rpx;
				.right-name{
					width: 320rpx;
					font-size: 26rpx;
					color: #101010;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					margin-left: 100rpx;
				}
				.right-money{
					color: $uni-tabbar-hovercolor;
					font-size: 28rpx;
					margin-right: -80rpx;
				}
				.b-hover{
					margin-right: 10rpx;
					padding: 5rpx 10rpx;
					border-radius: 10rpx;
					font-size: 12px;
					background: #FF6F30;
					color: #fff;
				}
			}
			
			.new-taskItem-bottom{
				display: flex;
				align-items: center;
				width: calc(100% - 100rpx);
				float: right;
				font-family: PingFangSC-regular;
				margin-bottom: 10rpx;
				text{
					margin-right: 10rpx;
					padding: 5rpx 10rpx;
					border-radius: 10rpx;
					font-size: 12px;
					background-color: rgb(241, 241, 241);
					color: #999;
				}
				.taskBitem{
					
					display: flex;
					align-items: center;
					margin-right: 48rpx;
					.iconfont{
						margin-right: 12rpx;
					}
				}
				.b-hover{
					background: #FF6F30;
					color: #fff;
				}
			}
			.taskItem-bottom{
				display: flex;
				align-items: center;
				width: calc(100% - 100rpx);
				float: right;
				color: #999999;
				font-size: 12px;
				font-family: PingFangSC-regular;
				margin-top: 4rpx;
				.taskBitem{
					display: flex;
					align-items: center;
					margin-right: 48rpx;
					.iconfont{
						margin-right: 12rpx;
					}
				}
			}
		}
		.taskItem:after{
			content:"";
			height: "";
			display: block;
			clear: both;
			visibility: hidden;
		}
	}
	.scorllbox{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.imagebox{
		width: 100%;
		text-align: center;
		image{
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}
	}
	.icon-wode{
		font-size: 28rpx;
	}
</style>
